<template>
	<view>
		<view class="main">
			<text class="renzhen">实名认证</text>
			<text class="tishi">请确保录入本人信息，否则将影响后续操作</text>
			<text class="myname">本人姓名</text>
			<input class="inputName" type="text" v-model="username"  placeholder="请输入真实姓名" />
			<text class="mycard">本人身份证号</text>
			<input @blur="renzhenbut" class="inputcard" v-model="usercard" type="text"  placeholder="请输入本人身份证号码" />
		</view>
		<view :class="butstyle">
			认证
		</view>
		<view class="fotter">
			<image class="hudun" src="../../../static/user2/hudun.png"></image>
			<text class="foter">实名信息仅用于身份验证，将严格保密</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				butstyle:'AutButton',
				username:'',
				usercard:'',
			};
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			renzhenbut(){
				if(this.username !="" ||this.usercard.length==18){
					console.log('阿达')
					this.butstyle='AutButtonb'
					}
			}
			}
	}
</script>

<style>

	.main{
		width: 750rpx;
		height: 600rpx;
		position: relative;
		top: 0rpx;
	}
	.renzhen{
		font-size:48rpx;
		font-family:PingFangSCRegular;
		font-weight:bold;
		color:rgba(51,51,51,1);
		position: absolute;
		top: 49rpx;
		left: 35rpx;
	}
	.tishi{
		font-size:30rpx;
		font-family:PingFangSCRegular;
		font-weight:400;
		color:rgba(142,142,142,1);
		position: absolute;
		top: 114rpx;
		left: 35rpx;
	}
	.myname{
		font-size:28rpx;
		font-family:PingFangSCRegular;
		font-weight:bold;
		color:rgba(119,119,119,1);		
		position: absolute;
		top: 243rpx;
		left: 35rpx;
	}
	.inputName{
		width: 680rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: absolute;
		top: 300rpx;
		left: 35rpx;
		font-size:30rpx;
		font-family:PingFangSCRegular;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.mycard{
		font-size:28rpx;
		font-family:PingFangSCRegular; 		 	
		font-weight:bold;
		color:rgba(119,119,119,1);
		position: absolute;
		top: 430rpx;
		left: 35rpx;
	}
	.inputcard{
		width:680rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: absolute;
		top: 490rpx;
		left: 35rpx;
		font-size:30rpx;
		font-family:PingFangSCRegular;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.AutButton{
		width:680rpx;
		height:90rpx;
		background:rgba(115,34,216,1);
		box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		opacity:0.5;
		border-radius:20rpx;
		font-size:38rpx;
		font-family:PingFangSCRegular;
		font-weight:550;
		color:rgba(255,255,255,1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 100rpx;
		left: 35rpx;
		}
		.AutButtonb{
			width:680rpx;
			height:90rpx;
			background:rgba(115,34,216,1);
			box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
			border-radius:20rpx;
			font-size:38rpx;
			font-family:PingFangSCRegular;
			font-weight:550;
			color:rgba(255,255,255,1);
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			top: 100rpx;
			left: 35rpx;
			}
		.fotter{
			width: 450rpx;
			height: 40rpx;
			position: absolute;
			bottom: 40rpx;
			left: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.hudun{
			width: 24rpx;
			height: 28rpx;
		}
		.foter{
			font-size:24rpx;
			font-family:PingFangSCRegular;
			font-weight:bold;
			color:rgba(199,199,199,1);
			margin-left: 15rpx;
		}
</style>
